<template>
  <div class="tab-bar">
    <tab-bar-item
      class="tab-bar-item"
      v-for="item in menus"
      :key="item.title"
      :path="item.path"
    >
      <i slot="icon" :class="['iconfont', item.icon]"></i>
      <div slot="title" class="title">{{ item.title }}</div>
    </tab-bar-item>
  </div>
</template>

<script>
import TabBarItem from './tab-bar-item.vue'
export default {
  components: {
    TabBarItem
  },
  data() {
    return {
      menus: [
        { title: '首页', icon: 'icon-iconfonthome0', path: '/' },
        { title: '分类', icon: 'icon-fenlei', path: '/category' },
        { title: '购物车', icon: 'icon-shangcheng', path: '/cart' },
        { title: '我的', icon: 'icon-user', path: '/profile' }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.tab-bar {
  background: white;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  border-top: 1px solid #dddddd;
  padding: 3px 0;
  .tab-bar-item {
    flex: 1;
    text-align: center;
    .title {
      font-size: 14px;
    }
  }
}
</style>
